<template>
  <div class="echart-shape-shape">
    <div class="serieNames">
      <div class="table-wrap">
        <el-table
          v-show="nameSeries.length"
          :class="`${xvueTheme} echart_table nameSeries_table`"
          :data="nameSeries"
          :row-style="{ height: '25px' }"
          :header-row-style="{ height: '25px' }"
          max-height="235"
          :header-cell-style="{ lineHeight: '15px' }"
        >
          <el-table-column
            fixed
            :label="$demoi18n('echart.th.sValue')"
            min-width="100px"
            prop="name"
          > </el-table-column>
          <el-table-column
            :label="$demoi18n('echart.th.serieType')"
            min-width="100px"
          >
            <template #default="scope">
              <ValueInputer
                v-model:value="scope.row.legendIcon"
                value-type="List"
                :enum-values="legendIcons_"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('echart.th.color')"
            min-width="60px"
          >
            <template #default="scope">
              <div :style="{ display: 'flex' }">
                <el-color-picker
                  v-model="scope.row.symbolColor"
                  :popper-class="'vis-color-picker-panel-' + xvueTheme"
                  size="default"
                  color-format="hex"
                ></el-color-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('echart.th.rotationAngle')"
            min-width="130px"
          >
            <template #default="scope">
              <ValueInputer
                v-model:value="scope.row.symbolRotate"
                value-type="Number"
                :min="0"
                :max="360"
                :controls="true"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('echart.th.graphSize')"
            min-width="250px"
          >
            <template #default="scope">
              <div class="symbol-range">
                <ValueInputer
                  v-model:value="scope.row.symbolWidth"
                  value-type="Number"
                  :min="0"
                  :controls="true"
                />
                <ValueInputer
                  v-model:value="scope.row.symbolHeight"
                  value-type="Number"
                  :min="0"
                  :controls="true"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { lineBarserieTypes, legendIcons } from '@/components/common/echart/form-item-options.js';
import echartUtil from '@/components/common/echart/echart-util.js';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { mapState } from 'vuex';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

const dfDataItem = {
  name: '',
  legendIcon: 'rect',
  symbolRotate: 0,
  symbolWidth: 10,
  symbolHeight: 10,
  symbolColor: '#00aaff',
};

export default {
  components: { ValueInputer },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineBarserieTypes,
      xvueTheme: window._adoPremise.uc.theme,
      nameSeries: [JSON.parse(JSON.stringify(dfDataItem))],
    };
  },
  computed: {
    legendIcons_() {
      return legendIcons.filter(n => n.value !== 'line'); // 一个组件多个图例图形没法用横线图标
    },
  },
  watch: {
    'form.echart._nameSeries': {
      handler() {
        this.nameSeries = this.form.echart._nameSeries;
      },
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const initNameSeries = JSON.parse(JSON.stringify(dfDataItem));
      echartUtil.registerVar('echart._nameSeries', this.form, this, [initNameSeries]);
      this.nameSeries = this.form.echart._nameSeries;
    },
  },
};
</script>
<style lang="less" scoped>
@import '../less/echart-common.less';
:deep(.el-table.is-scrolling-left th.el-table-fixed-column--left) {
  background-color: #ebeef5;
}
.table-wrap {
  overflow: auto;

  .nameSeries_table {
    margin-bottom: 5px;
    background-color: #ebeef5;
    :deep(.el-table__fixed) {
      height: calc(100% - -1px);
    }
    :deep(th),
    :deep(tr) {
      background-color: #ebeef5;
    }
    :deep(.el-table__fixed-body-wrapper) {
      max-height: 197px !important;
    }
    .symbol-range {
      display: flex;
    }
    :deep(.el-table__body-wrapper) {
      td.el-table-fixed-column--left{
        background-color: #ebeef5;
      }
    }
    :deep(.el-table__inner-wrapper) {
      &::before {
        height: 0;
      }
    }
  }
  .dark.nameSeries_table {
    :deep(th),
    :deep(tr) {
      background-color: #122b40;
    }
    :deep(tr.hover-row>td) {
      background-color: #152f45;
    }
    :deep(.el-table__body-wrapper) {
      td.el-table-fixed-column--left{
        background-color: #122b40;
      }
    }
  }
}
</style>
